<template>
  <div id="app" ref="app">
    <div class="calculator">
      <div class="setUp">
        <div class="font">
          设置
        </div>
        <div class="setting" v-show="showSetting">
          <div class="background">
            背景色
            <div class="colors">
              <div v-for="(color, index) in colors" :style="'background-color:'+color" class="color" @click="change(color)" :key="index"></div>
            </div>
            <hr>
            <div class="openness">
              透明度
              <div>
                <input type="range" v-model="openness" max="100" min="0">
              </div>
            </div>
            <div class="address">
              <a href="https://gitee.com/the_hand_of_the_master/computer.git" target="_blank">源码地址</a>
            </div>
          </div>
        </div>
      </div>
      <router-view/>
      <div class="notepad">
        <button @click="jump">{{buttonText}}</button>
      </div>
    </div>
  </div>
</template>
<style lang="css">
  #app{
    width: 100%;
    height: 100%;
    background-color: rgb(247,247,247);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .calculator{
    min-width: 540px;
    min-height: 440px;
    max-width: 540px;
    max-height: 440px;
    background: rgb(234, 236, 243);
    box-shadow: 0 0 10px #bbb;
    border-radius: 16px;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    z-index: 100;
    /*top: 100px;*/
  }
  .setUp{
    /*width: 100%;*/
    text-align: left;
    height: 60px;
    line-height: 30px;
    background-color: rgba(0,0,0,.1);
    position: absolute;
    top: 25px;
    left: -32px;
    box-shadow: 0 0 5px #bbbbbb;
    border-radius: 8px 0 0 8px;
    float: left;
    transition: all .8s;
    z-index: -100;
    /*left: -232px;*/
  }
  .setUp:hover{
    cursor: pointer;
    background-color: rgb(234,236,243);
    /*left: -130px;*/
  }
  .font{
    width: 30px;
    /*padding-left: 8px;*/
    text-align: center;
  }
  .setting{
    width: 0;
    height: 0;
    background-color: white;
    position: absolute;
    transition: all .8s;
    top: 0;
    left: 30px;
  }
  .background{
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
  }
  .colors > .color{
    margin: 6px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    display: inline-block;
  }
  .colors > .color:hover{
    outline: 2px solid blue;
  }
  .openness{
    margin-top: 20px;
  }
  .notepad{
    position: absolute;
    top: 25px;
    right: -30px;
  }
  .notepad > button{
    /*display: inline;*/
    width: 30px;
    border-radius: 0 8px 8px 0;
    padding: 0 4px;
    font-size: 10px;
    /*text-align: ;*/
    height: 90px;
  }
  .notepad > button:active{
    background-color: white;
  }
  .address{
    margin-top: 70px;
  }
  .address>a{
    text-decoration: none;
    font-size: 18px;
    color: black;
  }
  .address>a:hover{
    text-decoration: underline;
    color: blue;
  }
</style>
<script>
export default {
  name:'App',
  data(){
    return {
      // imgs: ['./bg/bg1.jpg','./bg/bg1.jpg','./bg/bg1.jpg'], // 存放的背景图
      // app: document.querySelector('#app'),
      colors:['rgba(247,247,247,1)','rgba(250,104,104,1)','rgba(251,149,110,1)','rgba(251,223,110,1)','rgba(72,246,227,1)','rgba(72,163,246,1)'],
      background_url: 'rgba(247,247,247,1)',
      openness: 100,
      showSetting: false,
      buttonText: '切换'
    }
  },
  watch:{
    // 修改背景色的透明度
    openness(value){
      // 用户输入的透明度
      let transparency = Number(value) / 100;
      let newBC = this.background_url.substring(0,this.background_url.lastIndexOf(',')+1);
      // console.log(newBC)
      this.background_url = newBC + transparency + ')';
      // console.log(this.background_url)
      // this.$refs.app.style.opacity = o;
      // console.log('背景色'+this.$refs.app.style.getPropertyPriority('background-color'));
      this.$refs.app.style.backgroundColor = this.background_url;
    }
  },
  mounted() {
    let setUp =document.querySelector('.setUp');
    let setting = document.querySelector('.setting');
    setUp.addEventListener('mouseover',()=>{
      // console.log('鼠标移入效果');
      setting.style.width = '200px';
      setting.style.height = '400px';
      setUp.style.left = '-232px';
      this.showSetting = true;
    })
    setUp.addEventListener('mouseout',()=>{
      setting.style.width = '0px';
      setting.style.height = '0px';
      setUp.style.left = '-32px';
      this.showSetting = false;
    })
  },
  methods:{
    // 跳转
    jump(){
      if (this.$store.state.isMath){
        // 现在在常规计算器
        this.$store.state.isMath = false;
        // 跳转到记事本
        this.$router.push('/notepad');
      }else {
        this.$store.state.isMath = true;
        // 跳转到计算器
        this.$router.push('/');
      }
    },
    change(color){
      // console.log(color)
      this.background_url = color;
      // 替换用户设置的背景色
      let transparency = Number(this.openness) / 100;
      let newBC = this.background_url.substring(0,this.background_url.lastIndexOf(',')+1);
      // console.log(newBC)
      this.background_url = newBC + transparency + ')';
      this.$refs.app.style.backgroundColor = this.background_url;
    }
  }
}
</script>